<html>
<head>
    <meta charset="utf-8">
    <title>ViewUI example</title>
    <link rel="stylesheet" href="js/bootstrap.min.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>

    <link rel="stylesheet" type="text/css" href="js/iview.css">
    <script type="text/javascript" src="js/vue.min.js"></script>
    <script type="text/javascript" src="js/iview.min.js"></script>
</head>
<body>
<div id="app1">
    <br>
    <div class="form-group">
        <span style="display: inline-block;width: 20%">试卷编号：</span>
        <input type="text" class="form-control" style="display: inline-block;width:70%" v-model="testNum">
    </div>
    <div style="clear:both"></div>

    <br>

    <Collapse>
        <Panel  v-for="(finalExamTask,index) in finalExamTasks" :key="index">

            题目编号(整数)：
            <input style="display: inline;width: 60%" type="text" class="form-control" v-model="finalExamTask.titleNum">

            <div slot="content">
                <div class="form-horizontal" role="form">

                    <div class="form-group">
                        <span style="display: inline-block;width: 20%">该题满分</span>
                        <input v-model="finalExamTask.fullMark" type="text" class="form-control"
                               style="display: inline-block;width:70%">
                    </div>
                    <div class="form-group">
                        <span style="display: inline-block;width: 20%">是否为选择题:</span>
                        <input type="radio" name="optionsRadios" v-model="finalExamTask.isSelect" value=true
                               checked> 是
                        <input type="radio" name="optionsRadios" v-model="finalExamTask.isSelect" value=false>否
                    </div>

                    <!--                        选择题-->
                    <div>
                        <div class="form-group">
                            <span style="display: inline-block;width: 20%">选择题答案为: </span>
                            <input v-model="finalExamTask.selectAnswer" type="text" class="form-control"
                                   style="display: inline-block;width:70%">
                        </div>
                    </div>

                    <!--                    非选择题，评分标准-->
                    <div>
                        <Collapse>
                            <Panel v-for="(scoreItem,index1) in finalExamTask.scoreItems"
                                   :key="index1" >
                                评分标准{{index1 + 1}}
                                <div slot="content">
                                    <div class="form-group">
                                        <span style="display: inline-block;width: 20%">描述: </span>
                                        <input type="text" class="form-control" v-model="scoreItem.description"
                                               style="display: inline-block;width:70%">
                                    </div>
                                    <div class="form-group">
                                        <span style="display: inline-block;width: 20%">该项满分: </span>
                                        <input type="text" class="form-control" v-model="scoreItem.fullMark"
                                               style="display: inline-block;width:70%">
                                    </div>
                                </div>
                            </Panel>

                        </Collapse>
                        <button class="btn btn-primary" @click="addScoreItem(index)">添加评分标准</button>
                        <div style="clear:both"></div>
                    </div>

                    <!--                    课程目标-->
                    <div>
                        <div class="form-group" v-for="(courseTarget,index2) in finalExamTask.courseTargets"
                             :key="index2">
                            <input type="checkbox" :checked="courseTarget.checked"> <span
                                style="display: inline-block;width: 20%">课程目标1</span>
                            权重：<input v-model="courseTarget.weight" type="text" class="form-control"
                                      style="display: inline-block;width:70%">
                        </div>
                    </div>

                </div>

            </div>
        </Panel>

    </Collapse>
    <button class="btn btn-primary" @click="addTask()">添加题目</button>
</div>

<script>
    var vm = new Vue({
        el: '#app1',
        data: {
            visible: false,
            courseId: 21,//课程ID
            testNum: 1,//试卷编号
            finalExamTasks: [
                {
                    titleNum: 0,//题目编号
                    isSelect: true,//是否为选择题
                    selectAnswer: '',//选择题答案
                    fullMark: 10,//该题满分
                    //评分标准
                    scoreItems: [
                        {
                            description: '',//描述
                            fullMark: ''//满分
                        }
                    ],
                    //课程目标
                    courseTargets: [
                        {
                            checked: true,
                            courseTargetNum: '课程目标一',
                            weight: 0.1
                        },
                        {
                            checked: false,
                            courseTargetNum: '课程目标二',
                            weight: 0.1
                        }
                    ]
                }
            ]
        },
        methods: {
            show: function () {
                this.visible = true;
            },
            addTask: function () {
                var finalExamTaskTemplate = {
                    titleNum: 0,//题目编号
                    isSelect: true,//是否为选择题
                    selectAnswer: '',//选择题答案
                    fullMark: 10,//该题满分
                    //评分标准
                    scoreItems: [
                        {
                            description: '',//描述
                            fullMark: ''//满分
                        }
                    ],
                    //课程目标
                    courseTargets: [
                        {
                            checked: true,
                            courseTargetNum: '课程目标一',
                            weight: 0.1
                        },
                        {
                            checked: false,
                            courseTargetNum: '课程目标二',
                            weight: 0.1
                        }
                    ]
                }
                this.finalExamTasks.push(finalExamTaskTemplate);
            }, addScoreItem: function (index) {
                var scoreItem = {
                    description: '',//描述
                    fullMark: ''//满分
                }
                this.finalExamTasks[index].scoreItems.push(scoreItem)
            }

        }
    });
</script>
</body>
</html>
